<template>
  <div class="employees">
    <el-card class="top-card">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <div class="info-box">
            <!-- 图标 -->
            <i class="el-icon-info" />
            <span>共{{ total }}条数据</span>
          </div></el-col>
        <el-col :span="6">
          <el-button
            type="warning"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button type="danger" @click="exportExcel">导出</el-button>
          <el-button type="warning" @click="addEmDialog">新增员工</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 底部卡片 -->
    <el-card class="bottom-card">
      <!-- 插入表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50" />
        <el-table-column prop="username" label="姓名" width="250" />
        <el-table-column prop="workNumber" label="工号" width="120" />
        <el-table-column
          prop="formOfEmployment"
          :formatter="formatEmp"
          label="聘用形式"
          width="250"
        />
        <el-table-column prop="departmentName" label="部门" width="300" />
        <el-table-column prop="timeOfEntry" label="入职时间" width="250">
          <template v-slot:default="{ row }">
            <span>{{ row.timeOfEntry | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户状态" width="300" />

        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleClick(row)"
            >查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="delEmployeeId(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-size="size"
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="page"
        @current-change="changSize(page)"
      />
    </el-card>
    <em-dialog ref="EmDialog" />
  </div>
</template>

<script>
import { getEmployees, delEmployeeById } from '@/api/employees'

import EMPLOYEECON from '@/api/constant/employees'
import EmDialog from './components/EmDialog.vue'
// import moment from 'moment'
export default {
  name: 'Employees',
  components: { EmDialog },
  // 不对
  // computed: {
  //   timeOfEntry() {
  //     return moment (timeOfEntry).format('YYYY年MM月DD日')
  //   }
  // },
  // 修改时间格式2 局部过滤器与moment的使用
  // filters: {
  //   formatDate(val) {
  //     console.log(val)
  //     return moment(val).format('YYYY年MM月DD日')
  //   }
  // },

  data() {
    return {
      size: 3,
      page: 1,
      total: 0,
      tableData: []
    }
  },

  // 改变页码方式二  侦听事件
  // watch: {
  //   page() {
  //     this.getDate()
  //   }
  // },
  created() {
    this.getDate()
  },
  methods: {
    // 导出
    async exportExcel() {
      const res = await getEmployees({
        size: 1000,
        page: 1
      })
      // console.log(res)
      //  转出头和数据
      const header = Object.keys(EMPLOYEECON.excelMap)
      // console.log(header)
      // console.log(res.rows)
      const data = res.rows.map((v) => {
        const _arr = []
        header.forEach((zhKey) => {
          // 获取英文key
          const enKey = EMPLOYEECON.excelMap[zhKey]
          // 然后通过enkey获取具体的值
          const value = v[enKey]
          console.log(value)  
          _arr.push(value)
        })
        return _arr
      })
      console.log(data)
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 根据id删除员工
    delEmployeeId(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delEmployeeById(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.page !== 1 && this.tableData.length === 1) {
            this.page--
          }
          this.getDate()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //  新增员工
    addEmDialog() {
      this.$refs.EmDialog.dialogFormVisible = true
    },

    // 聘用方式的
    formatEmp(row, column) {
      // console.log(row)
      const res = EMPLOYEECON.hireType.filter((v) => {
        if (v.id === parseInt(row.formOfEmployment)) {
          return true
        }
      })
      return res.length > 0 ? res[0].value : ''
    },
    // 改变页码  方式一 分页组件的点击事件
    changSize(page) {
      // console.log(page)
      this.page = page
      this.getDate()
    },

    //  获取员工列表
    async getDate() {
      const res = await getEmployees({
        size: this.size,
        page: this.page
      })
      // console.log(res)
      this.tableData = res.rows
      this.total = res.total
    }, 

    handleClick(row) {
      // console.log(row)
      this.$router.push({ name: 'detail', params: { id: row.id }})
    }
  }
}
</script>

<style lang="scss">
.employees {
  .top-card {
    // align-items: center;
    margin-bottom: 20px;
  }
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  .el-row {
    align-items: center;
  }
  .info-box {
    border: 1px solid #96d7ff;
    background-color: #e6f7ff;
    border-radius: 4px;
    display: inline-block;
    padding: 4px;
    i {
      color: #5181fb;
    }
  }
}
</style>
